<template>
    <div class="monitor-container">
        <!-- 顶部标题和状态栏 -->
        <div class="header">
            <div>
                <span class="device-info">设备识别码: {{ equipmentId }}</span>
                <span class="imei-info">数据发送时间: {{ formatSendTime }}</span>
            </div>
            <div class="status-bar">
                <span :class="['status', systemStatus]">{{ systemStatusText }}</span>
                <span class="comm-status" :class="ctrlCommStatus === 1 ? 'normal' : 'abnormal'">
                    通信状态: {{ ctrlCommStatus === 1 ? '正常' : '异常' }}
                </span>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 左侧监测数据卡片 -->
            <div class="left-panel">
                <!-- 漏电监测卡片 -->
                <div class="card" style="min-height: 340px">
                    <div class="card-header">
                        <h3>漏电监测 ({{ leakageChannels }}通道)</h3>
                        <div class="status-flags">
                            <span :class="leakageLinkBit === 1 ? 'enabled' : 'disabled'">
                                {{ leakageLinkBit === 1 ? '开启' : '关闭' }}
                            </span>
                            <span v-if="leakageLinkBit === 1" :class="leakageFaultBit === 1 ? 'fault' : 'normal'">
                                {{ leakageFaultBit === 1 ? '故障' : '正常' }}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="gauge-container">
                            <div class="gauge">
                                <div class="gauge-body">
                                    <div
                                            class="gauge-fill"
                                            :style="{ transform: `rotate(${leakagePercentage}deg)` }"
                                            :class="{ alarm: isLeakageAlarmActive, disabled: !isLeakageEnabled }"
                                            v-if="isLeakageEnabled && !isLeakageFault"
                                    ></div>
                                    <div class="gauge-disabled" v-else></div>
                                </div>
                                <div class="gauge-value">
                                    <template v-if="isLeakageEnabled && !isLeakageFault">
                                        {{ leakageValue }} mA
                                    </template>
                                    <template v-else-if="!isLeakageEnabled">
                                        关闭
                                    </template>
                                    <template v-else>
                                        故障
                                    </template>
                                </div>
                            </div>
                            <div class="gauge-label">
                                <span>0mA</span>
                                <span>1000mA</span>
                            </div>
                        </div>
                        <div class="alarm-status" v-if="isLeakageAlarmActive">
                            <i class="alarm-icon"></i>
                            <span class="alarm-text">漏电报警!</span>
                        </div>
                    </div>
                </div>
                <!-- 电压电流卡片 -->
                <div class="card" v-if="hasPower === 1">
                    <div class="card-header">
                        <h3>电压与电流 ({{ phaseType === 1 ? '三相' : '单相' }})</h3>
                    </div>
                    <div class="card-body">
                        <div class="voltage-current-grid">
                            <div class="param-row">
                                <span class="param-label">电压变比</span>
                                <span class="param-value">{{ ptRatio }}</span>
                            </div>
                            <div class="param-row" v-if="phaseType === 1">
                                <span class="param-label">电流变比</span>
                                <span class="param-value">{{ ctRatio }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">A相电压</span>
                                <span class="param-value">{{ voltageA }} V</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">A相电流</span>
                                <span class="param-value">{{ currentA }} A</span>
                            </div>
                            <div class="param-row" v-if="phaseType === 1">
                                <span class="param-label">B相电压</span>
                                <span class="param-value">{{ voltageB }} V</span>
                            </div>
                            <div class="param-row" v-if="phaseType === 1">
                                <span class="param-label">B相电流</span>
                                <span class="param-value">{{ currentB }} A</span>
                            </div>
                            <div class="param-row" v-if="phaseType === 1">
                                <span class="param-label">C相电压</span>
                                <span class="param-value">{{ voltageC }} V</span>
                            </div>
                            <div class="param-row" v-if="phaseType === 1">
                                <span class="param-label">C相电流</span>
                                <span class="param-value">{{ currentC }} A</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- DI/DO状态卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>DI/DO状态 ({{ diChannels === 1 ? '4DI' : '2DI' }})</h3>
                    </div>
                    <div class="card-body">
                        <div class="dido-grid">
                            <div class="param-row">
                                <span class="param-label">DI1使能状态</span>
                                <span class="param-value" :class="di1LinkBit === 1 ? 'normal' : 'disabled'">
                                    {{ di1LinkBit === 1 ? '闭合' : '断开' }}
                                </span>
                            </div>
                            <div class="param-row" v-if="di1LinkBit === 1">
                                <span class="param-label">DI1联动报警</span>
                                <span class="param-value" :class="di1AlarmBit === 1 ? 'alarm' : ''">
                                    {{ di1AlarmBit === 1 ? '报警' : '正常' }}
                                </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">DI2使能状态</span>
                                <span class="param-value" :class="di2LinkBit === 1 ? 'normal' : 'disabled'">
                                    {{ di2LinkBit === 1 ? '闭合' : '断开' }}
                                </span>
                            </div>
                            <div class="param-row" v-if="di2LinkBit === 1">
                                <span class="param-label">DI2联动报警</span>
                                <span class="param-value" :class="di2AlarmBit === 1 ? 'alarm' : ''">
                                    {{ di2AlarmBit === 1 ? '报警' : '正常' }}
                                </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">DO1状态</span>
                                <span class="param-value" :class="do1LinkBit === 1 ? 'normal' : 'disabled'">
                                    {{ do1LinkBit === 1 ? '闭合' : '断开' }}
                                </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">DO2状态</span>
                                <span class="param-value" :class="do2LinkBit === 1 ? 'normal' : 'disabled'">
                                    {{ do2LinkBit === 1 ? '闭合' : '断开' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧电力参数卡片 -->
            <div class="right-panel">
                <!-- 温度监测卡片 -->
                <div class="card" style="min-height: 340px">
                    <div class="card-header">
                        <h3>温度监测 ({{ tempChannels }}通道)</h3>
                    </div>
                    <div class="card-body">
                        <div class="temp-grid">
                            <div
                                    v-for="i in tempChannels"
                                    :key="i"
                                    class="temp-item"
                                    :class="{
                                        alarm: isTempAlarmActive(i),
                                        disabled: !isTempEnabled(i),
                                        fault: isTempFault(i) && isTempEnabled(i)
                                    }"
                            >
                                <div class="temp-value">
                                    通道{{ i }}

                                </div>
                                <div class="temp-label">
                                    <div class="alarm" v-if="!isTempEnabled(i)">
                                        关闭
                                    </div>
                                    <div class="normal" v-if="isTempEnabled(i)">
                                        开启
                                    </div>
                                    <div v-if="isTempEnabled(i) && !isTempFault(i)">
                                        {{ getTempValue(i) }}°C
                                    </div>
                                    <span class="temp-status">
                                        <div class="alarm" v-if="isTempFault(i)">
                                            故障
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 功率电能卡片 -->
                <div class="card" v-if="hasPower === 1">
                    <div class="card-header">
                        <h3>功率与电能</h3>
                    </div>
                    <div class="card-body">
                        <div class="power-grid">
                            <div class="param-row">
                                <span class="param-label">总有功功率</span>
                                <span class="param-value">{{ power }} kW</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">累计电能</span>
                                <span class="param-value">{{ energy }} kWh</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">过压报警</span>
                                <span class="param-value" :class="overvoltage === 1 ? 'alarm' : ''">
                                    {{ overvoltage === 1 ? '报警' : '正常' }}
                                </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">欠压报警</span>
                                <span class="param-value" :class="undervoltage === 1 ? 'alarm' : ''">
                                    {{ undervoltage === 1 ? '报警' : '正常' }}
                                </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">缺相报警</span>
                                <span class="param-value" :class="phaseloss === 1 ? 'alarm' : ''">
                                    {{ phaseloss === 1 ? '报警' : '正常' }}
                                </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">过流报警</span>
                                <span class="param-value" :class="overcurrent === 1 ? 'alarm' : ''">
                                    {{ overcurrent === 1 ? '报警' : '正常' }}
                                </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">过载报警</span>
                                <span class="param-value" :class="overcapacity === 1 ? 'alarm' : ''">
                                    {{ overcapacity === 1 ? '报警' : '正常' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 控制信息卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>控制信息</h3>
                    </div>
                    <div class="card-body">
                        <div class="control-grid">
                            <div class="param-row">
                                <span class="param-label">数据域类型</span>
                                <span class="param-value">
                            {{ ctrlDataDomain === 0 ? '数据域' : ctrlDataDomain === 1 ? '设置域' : '控制域' }}
                        </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">应答标识</span>
                                <span class="param-value">{{ ctrlNeedAck === 1 ? '需应答' : '无需应答' }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">上报模式</span>
                                <span class="param-value">
                            {{ ctrlReportMode === 0 ? '主机轮询' :
                               ctrlReportMode === 1 ? '从机应答' :
                               ctrlReportMode === 2 ? '定时上报' : '变位上报' }}
                        </span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">寻址模式</span>
                                <span class="param-value">
                            {{ ctrlAddrMode === 0 ? '四级地址' :
                               ctrlAddrMode === 1 ? '设备ID' :
                               ctrlAddrMode === 2 ? '逻辑地址' : '广播' }}
                        </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 谐波监测卡片 -->
                <div class="card" v-if="hasHarmonic === 1">
                    <div class="card-header">
                        <h3>谐波监测</h3>
                        <span>有谐波</span>
                    </div>
                    <div class="card-body">
                        <div class="harmonics-grid">
                            <div class="param-row">
                                <span class="param-label">A相电压谐波</span>
                                <span class="param-value">{{ harmonicsUa || 0 }}%</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">B相电压谐波</span>
                                <span class="param-value">{{ harmonicsUb || 0 }}%</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">C相电压谐波</span>
                                <span class="param-value">{{ harmonicsUc || 0 }}%</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">A相电流谐波</span>
                                <span class="param-value">{{ harmonicsIa || 0 }}%</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">B相电流谐波</span>
                                <span class="param-value">{{ harmonicsIb || 0 }}%</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">C相电流谐波</span>
                                <span class="param-value">{{ harmonicsIc || 0 }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!-- 报警信息栏 -->
        <div class="alarm-panel" :class="{ active: hasAlarm }">
            <div class="alarm-header">
                <h3>报警信息</h3>
                <span class="alarm-count" v-if="alarms.length > 0">{{ alarms.length }}条报警</span>
            </div>
            <div class="alarm-list">
                <div
                        v-for="(alarm, index) in alarms"
                        :key="index"
                        class="alarm-item"
                >
                    <div class="alarm-time">{{ alarm.time }}</div>
                    <div class="alarm-content">{{ alarm.content }}</div>
                </div>
                <div class="no-alarm" v-if="alarms.length === 0">无报警信息</div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        data() {
            return {
                // 设备基本信息
                equipmentInputStoreId: this.$route.query.equipmentInputStoreId || '',
                equipmentId: this.$route.query.equipmentId || '',
                warnTime: this.$route.query.warnTime || '',
                sendTime: null,

                // 标志位信息
                hasPower: null,         // 电能标志: 1-有电能, 0-无电能
                hasHarmonic: null,      // 谐波标志: 1-有谐波, 0-无谐波
                phaseType: null,        // 相数标志: 1-三相, 0-单相
                diChannels: null,       // DI通道: 1-4DI, 0-2DI
                leakageChannels: 0,     // 漏电通道数
                tempChannels: 0,        // 温度通道数

                // 报警状态
                leakageAlarmBit: 0,     // 漏电通道报警状态: 1-报警, 0-正常
                temp1AlarmBit: 0,       // 温度通道1报警状态
                temp2AlarmBit: 0,       // 温度通道2报警状态
                temp3AlarmBit: 0,       // 温度通道3报警状态
                temp4AlarmBit: 0,       // 温度通道4报警状态
                di1AlarmBit: 0,         // DI1联动报警状态
                di2AlarmBit: 0,         // DI2联动报警状态
                overvoltage: 0,         // 电力过压报警
                undervoltage: 0,        // 电力欠压报警
                phaseloss: 0,           // 电力缺相报警
                overcurrent: 0,         // 电力过流报警
                overcapacity: 0,        // 电力过载报警

                // 故障状态
                leakageFaultBit: 0,     // 漏电通道故障状态: 1-故障, 0-正常
                temp1FaultBit: 0,       // 温度通道1故障状态
                temp2FaultBit: 0,       // 温度通道2故障状态
                temp3FaultBit: 0,       // 温度通道3故障状态
                temp4FaultBit: 0,       // 温度通道4故障状态

                // 使能状态
                leakageLinkBit: 0,      // 漏电通道使能状态: 1-开启, 0-关闭
                temp1LinkBit: 0,        // 温度通道1使能状态
                temp2LinkBit: 0,        // 温度通道2使能状态
                temp3LinkBit: 0,        // 温度通道3使能状态
                temp4LinkBit: 0,        // 温度通道4使能状态
                di1LinkBit: 0,          // DI1使能状态: 1-闭合, 0-断开
                di2LinkBit: 0,          // DI2使能状态
                do1LinkBit: 0,          // DO1使能状态
                do2LinkBit: 0,          // DO2使能状态

                // 测量值
                leakageValue: 0,        // 漏电值(mA)
                temp1: 0,               // 温度通道1(℃)
                temp2: 0,               // 温度通道2(℃)
                temp3: 0,               // 温度通道3(℃)
                temp4: 0,               // 温度通道4(℃)
                voltageA: 0,            // A相电压(V)
                voltageB: 0,            // B相电压(V)
                voltageC: 0,            // C相电压(V)
                currentA: 0,            // A相电流(A)
                currentB: 0,            // B相电流(A)
                currentC: 0,            // C相电流(A)
                power: 0,               // 有功功率(kW)
                energy: 0,              // 电能值(kWh)

                // 变比
                ptRatio: 0,             // 电压变比
                ctRatio: 0,             // 电流变比

                // 谐波数据
                harmonicsUa: 0,         // A相电压谐波(%)
                harmonicsUb: 0,         // B相电压谐波(%)
                harmonicsUc: 0,         // C相电压谐波(%)
                harmonicsIa: 0,         // A相电流谐波(%)
                harmonicsIb: 0,         // B相电流谐波(%)
                harmonicsIc: 0,         // C相电流谐波(%)

                // 控制相关
                ctrlDataDomain: 0,      // 数据域类型:0-数据域,1-设置域,2-控制域
                ctrlNeedAck: 0,         // 应答标识:1-需应答,0-无需应答
                ctrlCommStatus: 0,      // 通信状态:1-正常,0-异常
                ctrlReportMode: 0,      // 上报模式
                ctrlAddrMode: 0,        // 寻址模式

                // 报警阈值
                leakageAlarmThreshold: 300, // 漏电报警阈值(mA)
                tempAlarmThreshold: 60,     // 温度报警阈值(℃)

                // 报警信息
                alarms: [],

                // 定时器
                updateTimer: null
            }
        },
        computed: {
            // 格式化发送时间
            formatSendTime() {
                if (!this.sendTime) return '';
                return new Date(this.sendTime).toLocaleString();
            },

            // 计算漏电百分比(用于仪表盘显示)
            leakagePercentage() {
                const max = 1000; // 最大显示1000mA
                const value = Math.min(this.leakageValue, max);
                return (value / max) * 180 - 90; // -90到90度
            },

            // 漏电通道是否启用
            isLeakageEnabled() {
                return this.leakageLinkBit === 1;
            },

            // 漏电通道是否故障
            isLeakageFault() {
                return this.leakageFaultBit === 1;
            },

            // 漏电报警是否有效
            isLeakageAlarmActive() {
                // 只有在通道启用且无故障时，报警才有效
                return this.isLeakageEnabled && !this.isLeakageFault && this.leakageAlarmBit === 1;
            },

            // 系统状态和文本
            systemStatus() {
                if (this.hasAlarm) {
                    return 'alarm';
                }
                return this.ctrlCommStatus === 1 ? 'normal' : 'abnormal';
            },

            systemStatusText() {
                if (this.hasAlarm) {
                    return '设备报警!';
                }
                return this.ctrlCommStatus === 1 ? '设备运行正常' : '通信异常';
            },

            // 是否有任何报警
            hasAlarm() {
                // 检查漏电报警
                if (this.isLeakageAlarmActive) return true;

                // 检查温度报警
                for (let i = 1; i <= this.tempChannels; i++) {
                    if (this.isTempAlarmActive(i)) return true;
                }

                // 检查DI报警
                if ((this.di1LinkBit === 1 && this.di1AlarmBit === 1) ||
                    (this.di2LinkBit === 1 && this.di2AlarmBit === 1)) {
                    return true;
                }

                // 检查电力报警
                if (this.overvoltage === 1 || this.undervoltage === 1 ||
                    this.phaseloss === 1 || this.overcurrent === 1 ||
                    this.overcapacity === 1) {
                    return true;
                }

                return false;
            }
        },
        methods: {
            // 温度通道是否启用
            isTempEnabled(channel) {
                switch (channel) {
                    case 1: return this.temp1LinkBit === 1;
                    case 2: return this.temp2LinkBit === 1;
                    case 3: return this.temp3LinkBit === 1;
                    case 4: return this.temp4LinkBit === 1;
                    default: return false;
                }
            },

            // 温度通道是否故障
            isTempFault(channel) {
                switch (channel) {
                    case 1: return this.temp1FaultBit === 1;
                    case 2: return this.temp2FaultBit === 1;
                    case 3: return this.temp3FaultBit === 1;
                    case 4: return this.temp4FaultBit === 1;
                    default: return false;
                }
            },

            // 温度通道报警是否有效
            isTempAlarmActive(channel) {
                // 只有在通道启用且无故障时，报警才有效
                if (!this.isTempEnabled(channel) || this.isTempFault(channel)) {
                    return false;
                }

                switch (channel) {
                    case 1: return this.temp1AlarmBit === 1;
                    case 2: return this.temp2AlarmBit === 1;
                    case 3: return this.temp3AlarmBit === 1;
                    case 4: return this.temp4AlarmBit === 1;
                    default: return false;
                }
            },

            // 获取温度通道值
            getTempValue(channel) {
                switch (channel) {
                    case 1: return this.temp1;
                    case 2: return this.temp2;
                    case 3: return this.temp3;
                    case 4: return this.temp4;
                    default: return 0;
                }
            },

            // 从后端接口获取实时数据
            async fetchRealtimeData() {
                try {
                    let response = '';
                    if(this.warnTime != "") {
                        response = await request.get("/sdf300-warn-data/getInfo?equipmentInputStoreId=" + this.equipmentInputStoreId + "&warnTime=" + this.warnTime);
                    } else {
                        response = await request.get(`/sdf300-current-data/${this.equipmentInputStoreId}`);
                    }

                    if (response.data) {
                        this.parseRealtimeData(response.data);
                    }
                } catch (error) {
                    console.error('获取实时数据失败:', error);
                }
            },

            // 解析实时数据
            parseRealtimeData(data) {
                // 设备基本信息
                this.equipmentInputStoreId = data.equipmentInputStoreId || '';
                this.sendTime = data.sendTime;

                // 标志位信息
                this.hasPower = data.hasPower;
                this.hasHarmonic = data.hasHarmonic;
                this.phaseType = data.phaseType;
                this.diChannels = data.diChannels;
                this.leakageChannels = data.leakageChannels || 0;
                this.tempChannels = data.tempChannels || 0;

                // 报警状态
                this.leakageAlarmBit = data.leakageAlarmBit || 0;
                this.temp1AlarmBit = data.temp1AlarmBit || 0;
                this.temp2AlarmBit = data.temp2AlarmBit || 0;
                this.temp3AlarmBit = data.temp3AlarmBit || 0;
                this.temp4AlarmBit = data.temp4AlarmBit || 0;
                this.di1AlarmBit = data.di1AlarmBit || 0;
                this.di2AlarmBit = data.di2AlarmBit || 0;
                this.overvoltage = data.overvoltage || 0;
                this.undervoltage = data.undervoltage || 0;
                this.phaseloss = data.phaseloss || 0;
                this.overcurrent = data.overcurrent || 0;
                this.overcapacity = data.overcapacity || 0;

                // 故障状态
                this.leakageFaultBit = data.leakageFaultBit || 0;
                this.temp1FaultBit = data.temp1FaultBit || 0;
                this.temp2FaultBit = data.temp2FaultBit || 0;
                this.temp3FaultBit = data.temp3FaultBit || 0;
                this.temp4FaultBit = data.temp4FaultBit || 0;

                // 使能状态
                this.leakageLinkBit = data.leakageLinkBit || 0;
                this.temp1LinkBit = data.temp1LinkBit || 0;
                this.temp2LinkBit = data.temp2LinkBit || 0;
                this.temp3LinkBit = data.temp3LinkBit || 0;
                this.temp4LinkBit = data.temp4LinkBit || 0;
                this.di1LinkBit = data.di1LinkBit || 0;
                this.di2LinkBit = data.di2LinkBit || 0;
                this.do1LinkBit = data.do1LinkBit || 0;
                this.do2LinkBit = data.do2LinkBit || 0;

                // 测量值
                this.leakageValue = data.leakageValue || 0;
                this.temp1 = data.temp1 || 0;
                this.temp2 = data.temp2 || 0;
                this.temp3 = data.temp3 || 0;
                this.temp4 = data.temp4 || 0;
                this.voltageA = data.voltageA || 0;
                this.voltageB = data.voltageB || 0;
                this.voltageC = data.voltageC || 0;
                this.currentA = data.currentA || 0;
                this.currentB = data.currentB || 0;
                this.currentC = data.currentC || 0;
                this.power = data.power || 0;
                this.energy = data.energy || 0;

                // 变比
                this.ptRatio = data.ptRatio || 0;
                this.ctRatio = data.ctRatio || 0;

                // 控制相关
                this.ctrlDataDomain = data.ctrlDataDomain || 0;
                this.ctrlNeedAck = data.ctrlNeedAck || 0;
                this.ctrlCommStatus = data.ctrlCommStatus || 0;
                this.ctrlReportMode = data.ctrlReportMode || 0;
                this.ctrlAddrMode = data.ctrlAddrMode || 0;

                // 处理报警信息
                this.handleAlarms();
            },

            // 处理报警信息
            handleAlarms() {
                const newAlarms = [];
                const currentTime = this.formatSendTime;

                // 漏电报警
                if (this.isLeakageAlarmActive) {
                    newAlarms.push({
                        time: currentTime,
                        content: `漏电值超过阈值(${this.leakageValue}mA > ${this.leakageAlarmThreshold}mA)`
                    });
                }

                // 温度报警
                for (let i = 1; i <= this.tempChannels; i++) {
                    if (this.isTempAlarmActive(i)) {
                        newAlarms.push({
                            time: currentTime,
                            content: `温度通道${i}超过阈值(${this.getTempValue(i)}°C > ${this.tempAlarmThreshold}°C)`
                        });
                    }
                }

                // DI联动报警
                if (this.di1LinkBit === 1 && this.di1AlarmBit === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `DI1联动报警`
                    });
                }
                if (this.di2LinkBit === 1 && this.di2AlarmBit === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `DI2联动报警`
                    });
                }

                // 电力报警
                if (this.overvoltage === 1) newAlarms.push({ time: currentTime, content: `电力过压报警` });
                if (this.undervoltage === 1) newAlarms.push({ time: currentTime, content: `电力欠压报警` });
                if (this.phaseloss === 1) newAlarms.push({ time: currentTime, content: `电力缺相报警` });
                if (this.overcurrent === 1) newAlarms.push({ time: currentTime, content: `电力过流报警` });
                if (this.overcapacity === 1) newAlarms.push({ time: currentTime, content: `电力过载报警` });

                // 通信异常报警
                if (this.ctrlCommStatus === 0) {
                    newAlarms.push({
                        time: currentTime,
                        content: `设备通信异常`
                    });
                }

                // 合并新报警(去重)
                newAlarms.forEach(alarm => {
                    const exists = this.alarms.some(a => a.content === alarm.content && a.time === alarm.time);
                    if (!exists) {
                        this.alarms.unshift(alarm); // 最新的报警放前面
                    }
                });

                // 限制报警列表长度
                if (this.alarms.length > 10) {
                    this.alarms = this.alarms.slice(0, 10);
                }
            }
        },
        mounted() {
            // 启动定时更新数据(每60秒)
            this.updateTimer = setInterval(() => {
                this.fetchRealtimeData();
            }, 60000);

            // 初始加载数据
            this.fetchRealtimeData();
        },
        beforeDestroy() {
            // 清除定时器
            if (this.updateTimer) {
                clearInterval(this.updateTimer);
            }
        }
    }
</script>

<style scoped>
    .monitor-container {
        font-family: 'Arial', sans-serif;
        color: #ffffff;
        width: 100%;
        margin: 0 auto;
        padding: 20px;
        min-height: 100vh;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        flex-wrap: wrap;
    }

    .device-info {
        color: #ffffff;
        font-size: 18px;
        margin-right: 20px;
    }

    .imei-info {
        color: #ffffff;
        font-size: 18px;
    }

    .status-bar {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .status {
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }

    .status.normal {
        background-color: #4CAF50;
        color: white;
    }

    .status.warning {
        background-color: #FFC107;
        color: #333;
    }

    .status.alarm {
        background-color: #F44336;
        color: white;
        animation: blink 1s infinite;
    }

    .status.abnormal {
        background-color: #FF9800;
        color: white;
    }

    .comm-status {
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }

    .comm-status.normal {
        background-color: #4CAF50;
        color: white;
    }

    .comm-status.abnormal {
        background-color: #F44336;
        color: white;
    }

    .time {
        color: #ffffff;
    }

    .main-content {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .left-panel, .right-panel {
        flex: 1;
        min-width: 400px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .card {
        background: linear-gradient(135deg, #142339, #152555);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .card-header {
        padding: 15px 20px;
        background-color: #2c3e50;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header h3 {
        margin: 0;
        font-size: 18px;
    }

    .status-flags {
        display: flex;
        gap: 10px;
        font-size: 14px;
    }

    .status-flags .enabled {
        color: #4CAF50;
    }

    .status-flags .disabled {
        color: #9E9E9E;
    }

    .status-flags .fault {
        color: #F44336;
    }

    .status-flags .normal {
        color: #4CAF50;
    }

    .alarm-value {
        font-size: 14px;
        opacity: 0.8;
    }

    .card-body {
        padding: 20px;
    }

    .gauge-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gauge {
        position: relative;
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
    }

    .gauge-body {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 10px solid #e0e0e0;
    }

    .gauge-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #4CAF50;
        transform-origin: right center;
        transform: rotate(-90deg);
        transition: transform 0.5s ease;
    }

    .gauge-fill.alarm {
        background-color: #F44336;
    }

    .gauge-fill.disabled {
        background-color: #bdbdbd;
    }

    .gauge-disabled {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #F44336;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9e9e9e;
        font-size: 14px;
    }

    .gauge-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }

    .gauge-label {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 10px;
        color: #ffffff;
    }

    .temp-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .temp-item {
        padding: 15px;
        border-radius: 6px;
        border: 1px solid green;
        text-align: center;
        transition: all 0.3s;
    }

    .temp-item.alarm {
        border: 1px solid #F44336;
        animation: pulse 1.5s infinite;
    }

    .temp-item.disabled {
        border: 1px solid #e0e0e0;
        opacity: 0.6;
    }

    .temp-item.fault {
        border: 1px solid #FF9800;
    }

    .temp-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .temp-value.alarm {
        color: #F44336;
    }

    .temp-label {
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .temp-label .normal {
        color: #4CAF50;
    }

    .temp-label .alarm {
        color: #F44336;
    }

    .temp-status {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 10px;
    }

    .temp-status.alarm {
        color: #F44336;
    }

    .temp-status:empty {
        display: none;
    }

    .voltage-current-grid, .power-grid, .harmonics-grid, .dido-grid, .control-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .param-row {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .param-label {
        color: #ffffff;
    }

    .param-value {
        font-weight: bold;
    }

    .param-value.alarm {
        color: #F44336;
    }

    .param-value.disabled {
        color: #9E9E9E;
    }

    .param-value.normal {
        color: #4CAF50;
    }

    .control-panel {
        margin-bottom: 20px;
    }

    .alarm-panel {
        background: linear-gradient(135deg, #142339, #152555);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .alarm-panel.active {
        border-left: 5px solid #F44336;
    }

    .alarm-header {
        padding: 15px 20px;
        background-color: #2c3e50;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .alarm-count {
        background-color: #F44336;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 14px;
    }

    .alarm-list {
        max-height: 200px;
        overflow-y: auto;
    }

    .alarm-item {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .alarm-item:last-child {
        border-bottom: none;
    }

    .alarm-time {
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 5px;
    }

    .alarm-content {
        font-weight: 500;
    }

    .no-alarm {
        padding: 20px;
        text-align: center;
        color: #ffffff;
    }

    .alarm-status {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
        padding: 8px;
        background-color: #FFEBEE;
        border-radius: 4px;
        color: #F44336;
        font-weight: bold;
    }

    .alarm-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: #F44336;
        border-radius: 50%;
        margin-right: 8px;
    }

    .alarm-text {
        font-size: 14px;
    }

    .ratio-info {
        font-size: 12px;
        display: flex;
        gap: 10px;
        opacity: 0.8;
    }

    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); }
        100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
    }

    @media (max-width: 900px) {
        .main-content {
            flex-direction: column;
        }

        .left-panel, .right-panel {
            min-width: 100%;
        }

        .voltage-current-grid, .power-grid, .harmonics-grid, .dido-grid, .control-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
